<template>
  <div class="wrapper">
    <!-- 订单状态 -->
    <view class="tabs">
      <text class="active">全部</text>
      <text>待付款</text>
      <text>已付款</text>
      <text>退款/退货</text>
    </view>
    <!-- 订单列表 -->
    <scroll-view class="orders" scroll-y>
      <view class="item" :key='item.order_id' v-for='item in orderList'>
        <template v-for='p in item.goods'>
          <!-- 商品图片 -->
          <image class="pic" :key='p.goods_id' :src="p.goods_small_logo"></image>
          <!-- 商品信息 -->
          <view class="meta">
            <view class="name">{{p.goods_name}}</view>
            <view class="price">
              <text>￥</text>{{p.goods_price}}<text>.00</text>
            </view>
            <view class="num">x11</view>
          </view>
        </template>
        <!-- 总价 -->
        <view class="amount">
          共{{item.total_count}}件商品 总计: ￥{{item.total_price}}(含运费0.00)
        </view>
        <!-- 其它 -->
        <view class="extra">
          订单号: {{item.order_number}}
          <button @click='handlePay(item.order_number)' size="mini" type="primary">支付</button>
        </view>
      </view>
    </scroll-view>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: '订单',
        orderNumber: '',
        orderList: []
      }
    },
    onLoad(param) {
      this.orderNumber = param.order_number
      this.loadOrderList()
    },
    methods: {
      async handlePay (orderNumber) {
        // 1、调用接口，委托微信进行支付
        const data = await this.$request('my/orders/req_unifiedorder', {
          order_number: orderNumber
        }, 'POST', {
          Authorization: uni.getStorageSync('mytoken')
        })
        // 2、如果委托成功,那么返回的数据用于进行实际的支付操作
        if (data.meta.status === 200) {
          const pay = data.message.pay
          uni.requestPayment({
            ...pay,
            success: () => {
              // 如果付款成功那么，该方法就会触发
              // 支付成功后，购物车中被支付过的商品需要删除
              // 1、获取购物车原有数据
              const cart = uni.getStorageSync('mycart')
              // 2、获取支付的商品的数据
              const currentOrder = this.orderList.filter(item => {
                return item.order_number === orderNumber
              })
              const goods = currentOrder[0].goods
              // 3、删除购物车中goods中包含的商品
              const result = cart.filter(item => {
                return !goods.some(p => {
                  return p.goods_id === item.goods_id
                })
              })
              // 4、把剩下的数据再写回缓存
              uni.setStorageSync('mycart', result)
            }
          })
        } else {
          uni.showToast({
            title: data.meta.msg
          })
        }
      },
      async loadOrderList () {
        // 获取订单列表数据
        const data = await this.$request('my/orders/all', {type: 1}, 'GET', {
          Authorization: uni.getStorageSync('mytoken')
        })
        if (data.meta.status === 200) {
          this.orderList = data.message.orders
        } else {
          uni.showToast({
            title: data.meta.msg
          })
        }
      }
    }
  }
</script>
<style scoped lang="less">
  .tabs {
    display: flex;
    height: 96rpx;
    line-height: 96rpx;
    background-color: #fff;
    box-shadow: 0 4rpx 10rpx #ccc;

    text {
      flex: 1;
      text-align: center;
      font-size: 27rpx;
      color: #333;

      &.active {
        color: #ea4451;
      }
    }
  }

  .orders {
    width: 100%;
    background-color: #f4f4f4;

    position: absolute;
    top: 97rpx;
    bottom: 0;
  }

  .item {
    padding: 30rpx 20rpx 0;
    margin-top: 16rpx;
    background-color: #fff;

    .pic {
      width: 200rpx;
      height: 200rpx;
      float: left;
    }

    .meta {
      height: 200rpx;
      margin-left: 230rpx;
      font-size: 27rpx;
      color: #333;
      position: relative;
    }

    .name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price {
      position: absolute;
      bottom: 0;

      color: #ea4451;
      font-size: 33rpx;

      text {
        font-size: 22rpx;
      }
    }

    .num {
      position: absolute;
      bottom: 0;
      right: 20rpx;
      color: #333;
    }

    .amount {
      text-align: right;
      padding: 20rpx;
      font-size: 24rpx;
      border-top: 1rpx solid #eee;
      border-bottom: 1rpx solid #eee;
      margin-top: 20rpx;
      color: #999;
    }

    .extra {
      padding: 30rpx;
      font-size: 24rpx;
      color: #999;
      position: relative;

      button {
        position: absolute;
        right: 20rpx;
        font-size: 24rpx;
        margin-top: -10rpx;
      }
    }
  }
</style>
